<!--
 * @Description: 实例管理 - 主页面
 * @Author: DHL
 * @Date: 2022-09-15 16:20:19
 * @LastEditors: DHL
 * @LastEditTime: 2022-11-28 16:01:45
-->
<template>
  <div class="flow-procinst-wrapper">
    <splitpanes class="default-theme">
      <pane :size="20" class="flow-procinst-left">
        <flowCategoryTree
          ref="flowCategoryTreeRef"
          :draggable="true"
          @nodeClick="handleNodeClick"
          @search="handleTreeSearch"
        ></flowCategoryTree>
      </pane>
      <pane :size="80">
        <tw-layout @refresh="handleRefresh" @search="handleSearch" @reset="handleReset">
          <!-- 查询表单 -->
          <template #header>
            <el-form ref="searchFormRef" :model="searchForm" label-width="90px">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="名称">
                    <el-input
                      v-model="searchForm.name"
                      clearable
                      placeholder="请输入名称"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="发起人">
                    <el-input
                      v-model="searchForm.startUserId"
                      clearable
                      placeholder="请输入流程发起人名称"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="流程实例ID">
                    <el-input
                      v-model="searchForm.procInstId"
                      clearable
                      placeholder="请输入流程实例ID"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="业务标识">
                    <el-input
                      v-model="searchForm.businessKey"
                      clearable
                      placeholder="请输入业务标识"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="开始时间">
                    <div class="flex-space-between">
                      <el-date-picker
                        v-model="searchForm.startTimeBegin"
                        type="datetime"
                        clearable
                        placeholder="请输入开始时间-开始"
                      ></el-date-picker>
                      <div class="split-line">-</div>
                      <el-date-picker
                        v-model="searchForm.startTimeEnd"
                        type="datetime"
                        clearable
                        placeholder="请输入开始时间-结束"
                      ></el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="结束时间">
                    <div class="flex-space-between">
                      <el-date-picker
                        v-model="searchForm.endTimeBegin"
                        type="datetime"
                        clearable
                        placeholder="请输入结束时间-开始"
                      ></el-date-picker>
                      <div class="split-line">-</div>
                      <el-date-picker
                        v-model="searchForm.endTimeEnd"
                        type="datetime"
                        clearable
                        placeholder="请输入结束时间-结束"
                      ></el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="业务状态">
                    <el-input
                      v-model="searchForm.businessStatus"
                      clearable
                      placeholder="请输入业务状态"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>

          <!-- 数据表格 -->
          <tw-table
            ref="tableRef"
            :loading="loading"
            :options="tableOptions"
            :events="tableEvents"
            :data="tableData"
            @search="searchList"
            exportExcelAuthKey="ACT-HI-PROCINST-EXPORTEXCEL"
            @exportExcel="handleExport"
          >
            <template #action="{ row }">
              <el-button link type="primary" @click="handlePreviewFlowchart(row)">
                流程图
              </el-button>

              <el-button
                link
                type="danger"
                v-auth="`ACT-HI-PROCINST-DEL-BATCH`"
                @click="handleDelete(row)"
              >
                删除
              </el-button>
            </template>
          </tw-table>
        </tw-layout>
      </pane>
    </splitpanes>

    <previewFlowchartPopup ref="previewFlowchartRef"></previewFlowchartPopup>
  </div>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss">
  .flow-procinst-wrapper {
    height: 100%;
    background-color: #ffffff;

    .splitpanes__pane {
      background-color: #ffffff;
    }

    .flow-procinst-left {
      height: calc(100% - 20px);
      padding: 10px;
    }
  }
</style>
